<template>
  <view class="search-box" :style="{ background: backColor }">
		<u-search
			v-model="searchValue"
			shape="round"
			:showAction="false"
			:placeholder="placeholder"
			:pageTitle="pageTitle"
			:bgColor="bgColor"
			@clear="clear"
		></u-search>
		<view class="search-btn" @click="clickSearch">搜索</view>
  </view>
</template>

<script>
	export default {
		name: 'Search',
		props: {
			// searchValue: {
			// 	type: [String, Number],
			// 	default: ''
			// },
			pageTitle: {
				type: String,
				default: '搜索页面的导航'
			},
			placeholder: {
				type: String,
				default: '请输入'
			},
			backColor: {
				type: String,
				default: '#F6F6F6'
			},
			bgColor: {
				type: String,
				default: '#F6F6F6'
			},
			searchUrl: {
				type: String,
				default: ''
			},
			searchParams: {
				type: Object
			}
		},
		data() {
			return {
				searchValue: ''
			}
		},
		created() {
			uni.setStorageSync('clickSearch', false)
		},
		methods: {
			clear() {
				this.$emit('clear')
			},
			clickSearch() {
				this.$emit('search', this.searchValue)
				// const clickSearch = uni.getStorageSync('clickSearch')
				// if (clickSearch) return
				// uni.setStorageSync('clickSearch', true)
				// const urlParams = {
				// 	title: this.pageTitle,
				// 	placeholder: this.placeholder,
				// }
				// const params = encodeURIComponent(JSON.stringify(urlParams))
				// const searchParams = encodeURIComponent(JSON.stringify(this.searchParams))
				// uni.navigateTo({
				// 	url: `${this.searchUrl}?params=${params}&searchParams=${searchParams}&searchValue=${this.searchValue}`
				// })
				
			}
		}
	}
</script>
<style lang="scss" scoped>
	.search-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 35rpx 10px;
		padding: 0 10rpx;
		height: 40px;
		border-radius: 20px;
		line-height: 40px;
		.search-btn {
			width: 120rpx;
			height: 60rpx;
			border-radius: 30rpx;
			line-height: 60rpx;
			text-align: center;
			color: #FFF;
			background-color: #0b3f35;
		}
	}
</style>